﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>登陆页面</title>

    <link href="../css/bootstrap.css" rel="stylesheet"/>
    <link href="../css/font-awesome.css" rel="stylesheet"/>

    <style>
        [v-cloak] {
            display: none;
        }
        .table th, .table td {
            text-align: center !important;
            vertical-align: middle !important;
        }
    </style>
</head>
<body style="background:url('../img/background.jpg') no-repeat center; background-size: 100% 240%;">
<div id="apps" class="container" v-cloak>
    <div class="row text-center " style="padding-top:180px;">
        <div class="col-md-12">
           <h2 style="color: white">欢迎登录学生选课系统</h2>
        </div>
    </div>
    <div class="row">
        <div  class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">

            <div class="panel-body">
                    <form role="form" id="login-form">
                        <hr/>
                        <br/>
                        <div class="form-group input-group">
                            <span class="input-group-addon"><i class="fa fa-tag"></i></span>
                            <input type="text" class="form-control" v-model="user.name" placeholder="用户名"/>
                        </div>
                        <div class="form-group input-group">
                            <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                            <input type="password" class="form-control" v-model="user.password" placeholder=" 密码"/>
                        </div>
                        <h5 style="color: white">请选择角色</h5>
                        <div class="form-group input-group">
                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                            <select class="form-control" v-model="user.level">
                                <option value="" selected="">请选择</option>
                                <option value="1">管理员</option>
                                <option value="2">教师</option>
                                <option value="3">学生</option>
                            </select>
                        </div>

                        <div  style="text-align: center">
                            <a href="javascript:void(0)" class="btn btn-block btn-primary" @click="login">登录</a>
                        </div>
                        <hr/>
                        <div style="text-align: center">
                            <span style="color: white">未注册 ?</span> <a href="register.html" style="color: yellow">点击这里</a>
                        </div>
                    </form>
            </div>
        </div>
    </div>
</div>

<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>

<script>
    new Vue({
        el: "#apps",
        data: {
            user: {}
        },
        created: function () {

        },
        methods: {
            login() {

                axios.post("/login", this.user).then(res => {
                    if (res.data.code === '0') {
                        let user = res.data.data;
                        localStorage.setItem('user', JSON.stringify(user));
                        if (user && user.level && 1 === user.level) {
                            window.location = "/end/page/accountAdminInfo.html";
                        }
                        if (user && user.level && 2 ===  user.level)  {
                            window.location = '/end/page/accountTeacherInfo.html';
                        }
                        if (user && user.level && 3 === user.level) {
                            window.location = '/end/page/accountStudentInfo.html';
                        }
                    } else {
                        alert(res.data.msg);
                    }
                })
            }
        }
    });

</script>
</body>
</html>
